<template>
  <div id="userManagePage">
    <a-input-search
      style="max-width: 320px; margin-bottom: 20px"
      v-model:value="searchValue"
      placeholder="输入用户名搜索"
      enter-button="查询"
      size="large"
      @search="fetchData(searchValue)"
    />
    <a-table :columns="columns" :data-source="data">
      <template #bodyCell="{ column, record }">
        <!--      头像-->
        <template v-if="column.dataIndex === 'tx'">
          <a-image :src="record.tx" :width="120" />
        </template>
        <!--      管理员-->
        <template v-else-if="column.dataIndex === 'userRole'">
          <div v-if="record.userRole === 1">
            <a-tag color="green">管理员</a-tag>
          </div>
          <div v-else>
            <a-tag color="blue">普通用户</a-tag>
          </div>
        </template>
        <!--      创建时间-->
        <template v-else-if="column.dataIndex === 'createTime'">
          {{ dayjs(record.createTime).format("yyyy-MM-dd HH:mm:ss") }}
        </template>
        <template v-else-if="column.dataIndex === 'action'">
          <a-button danger @click="doDelete(record.id)">删除</a-button>
        </template>
      </template>
    </a-table>
  </div>
</template>
<script lang="ts" setup>
import { deleteUser, getUserList } from "@/api/user";
import { ref } from "vue";
import { message } from "ant-design-vue";
import dayjs from "dayjs";

const searchValue = ref("");

const columns = [
  {
    title: "序号",
    dataIndex: "id",
  },
  {
    title: "用户名",
    dataIndex: "name",
  },
  {
    title: "账号",
    dataIndex: "account",
  },
  {
    title: "头像",
    dataIndex: "tx",
  },
  {
    title: "性别",
    dataIndex: "xb",
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
  },
  {
    title: "用户角色",
    dataIndex: "userRole",
  },
  {
    title: "操作",
    dataIndex: "action",
  },
];
const doDelete = async (id: any) => {
  if (id) {
    const res = await deleteUser(id);
    if (res.data.code === 200) {
      message.success("删除成功");
    } else {
      message.error("删除失败");
    }
  }
};
const data = ref([]);
const fetchData = async (username = "") => {
  const res = await getUserList(username);
  if (res.data.data) {
    data.value = res.data.data;
  } else {
    message.error("获取数据失败");
  }
};
fetchData();
</script>
